<template>
  <div class="zBox">
    <el-row
      type="flex"
      justify="space-around"
    >
      <el-col
        :span="11"
        class="left"
      >
        <el-row
          class="makeHeader"
          type="flex"
          justify="space-between"
        >
          <el-col
            :span="12"
            style="display: flex; align-items: center"
          >
            字典名称：
            <el-input
              style="flex: 1"
              v-model="name"
              placeholder="请输入"
            ></el-input>
          </el-col>
          <el-col
            :span="9"
            style="display: flex; align-items: center"
          >
          </el-col>
          <el-col
            :span="5"
            style="text-align: right"
          >
            <el-button
              plain
              @click="resetHandler('father')"
              >重置</el-button
            >
            <el-button
              type="primary"
              @click="searchHandler('father')"
              >查询</el-button
            >
          </el-col>
        </el-row>
        <el-row class="contentDiv">
          <el-row
            type="flex"
            justify="space-between"
            align="center"
            style="margin-bottom: 10px"
          >
            <el-col :span="8">字典分类列表</el-col>
            <el-col
              :span="8"
              style="text-align: right"
            >
              <el-button
                type="primary"
                @click="addHandler('father')"
                >新增</el-button
              >
            </el-col>
          </el-row>
          <el-row>
            <el-table
              :data="renderData"
              border
              style="width: 100%"
              element-loading-text="Loading"
              element-loading-spinner="el-icon-loading"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              @row-click="rowClick"
              highlight-current-row
              ref="renderData"
              height="745"
            >
              <el-table-column
                width="60"
                label="序号"
                type="index"
              ></el-table-column>
              <el-table-column
                min-width="150"
                show-overflow-tooltip
                prop="name"
                label="字典名称"
              >
              </el-table-column>
              <el-table-column
                min-width="150"
                show-overflow-tooltip
                prop="value"
                label="字典类型key"
              >
              </el-table-column
              ><el-table-column
                min-width="150"
                show-overflow-tooltip
                prop="createTime"
                label="创建时间"
              >
              </el-table-column>
              <el-table-column
                min-width="150"
                show-overflow-tooltip
                prop="remark"
                label="备注"
              >
              </el-table-column>

              <el-table-column
                fixed="right"
                label="操作"
                width="100"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-button
                    @click="editHandler(scope.row, 'father')"
                    type="text"
                    size="small"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    style="color: #f56c6c"
                    @click="
                      deleteDictionaryApi({ idList: [scope.row.id] }, scope.row)
                    "
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row>
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 20, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </el-row>
        </el-row>
      </el-col>
      <el-col
        :span="11"
        class="right"
      >
        <el-row
          class="makeHeader"
          type="flex"
          justify="space-between"
        >
          <el-col
            :span="12"
            style="display: flex; align-items: center"
          >
            子字典名称：
            <el-input
              style="flex: 1"
              v-model="childrenName"
              placeholder="请输入"
            ></el-input>
          </el-col>
          <el-col
            :span="9"
            style="display: flex; align-items: center"
          >
          </el-col>
          <el-col
            :span="5"
            style="text-align: right"
          >
            <el-button
              plain
              @click="resetHandler('son')"
              >重置</el-button
            >
            <el-button
              type="primary"
              @click="searchHandler('son')"
              >查询</el-button
            >
          </el-col>
        </el-row>
        <el-row class="contentDiv">
          <el-row
            type="flex"
            justify="space-between"
            align="center"
            style="margin-bottom: 10px"
          >
            <el-col :span="8">子字典分类列表</el-col>
            <el-col
              :span="8"
              style="text-align: right"
            >
              <el-button
                type="primary"
                @click="addHandler('son')"
                >新增</el-button
              >
            </el-col>
          </el-row>
          <el-row>
            <el-table
              :data="childrenData"
              border
              style="width: 100%"
              element-loading-text="Loading"
              element-loading-spinner="el-icon-loading"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              height="745"
            >
              <el-table-column
                label="序号"
                type="index"
                width="60"
              ></el-table-column>
              <el-table-column
                prop="name"
                label="字典名称"
                min-width="150"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="value"
                label="字典键值"
                min-width="150"
                show-overflow-tooltip
              >
              </el-table-column
              ><el-table-column
                prop="typeId"
                label="字典类型id"
                min-width="150"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="typeValue"
                label="父字典类型Key"
                min-width="200"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                prop="remark"
                label="备注"
                min-width="150"
                show-overflow-tooltip
              >
              </el-table-column>

              <el-table-column
                fixed="right"
                label="操作"
                width="100"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  <el-button
                    @click="editHandler(scope.row, 'son')"
                    type="text"
                    size="small"
                    >编辑</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    style="color: #f56c6c"
                    @click="
                      deleteChildDictionaryApi(
                        { idList: [scope.row.id] },
                        scope.row
                      )
                    "
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table> </el-row
          ><el-row>
            <el-pagination
              background
              @size-change="childrenHandleSizeChange"
              @current-change="childrenHandleCurrentChange"
              :current-page="childrenPageNum"
              :page-sizes="[10, 20, 50]"
              :page-size="childrenPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="childrenTotal"
            >
            </el-pagination>
          </el-row>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog
      :title="editTitle"
      :visible.sync="editShow"
      width="30%"
      :modal="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        label-width="110px"
        :model="editForm"
        :rules="rules"
        ref="editForm"
      >
        <el-form-item
          label="字典名称"
          prop="name"
        >
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item
          label="字典类型Key"
          prop="value"
        >
          <el-input v-model="editForm.value"></el-input>
        </el-form-item>
        <el-form-item
          label="父字典类型Key"
          v-if="editForm.typeValue !== undefined"
        >
          <el-input
            v-model="typeValue"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="editForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="cancelHandler('editForm')">取 消</el-button>
        <el-button
          type="primary"
          @click="saveHandler('editForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  pageDictionary,
  saveDictionary,
  updateDictionary,
  deleteDictionary,
  pageChildDictionary,
  saveChildDictionary,
  updateChildDictionary,
  deleteChildDictionary,
} from '/src/http/backstageManage/sysMg/dictionaryMg/dictionaryMg.js'
export default {
  watch: {
    // 加载完成，默认高亮第一行
    renderData: function () {
      this.$nextTick(function () {
        this.$refs.renderData.setCurrentRow(this.renderData[0])
      })
    },
  },
  data() {
    return {
      editTitle: '新增字典',
      editShow: false,
      //   字典
      name: '',
      value: '',
      childName: '',
      childValue: '',
      renderData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      isSearch: false,
      //   子字典
      childrenName: '',
      childrenValue: '',
      childrenData: [],
      childrenPageNum: 1,
      childrenPageSize: 10,
      childrenTotal: 0,
      isSearchChildren: false,
      typeId: null,
      typeValue: null,
      editForm: {
        id: null,
        name: '',
        value: '',
        typeValue: '',
        remark: '',
      },
      rules: {
        name: [{ required: true, message: '请输入字典名称', trigger: 'blur' }],
        value: [
          { required: true, message: '请输入字典类型Key', trigger: 'blur' },
          {
            pattern: /^[^\u4e00-\u9fa5]+$/,
            message: '字典类型Key只能输入英文数字及字符',
            trigger: 'blur',
          },
        ],
        typeValue: [
          { required: true, message: '请输入父字典类型Key', trigger: 'blur' },
        ],
      },
    }
  },

  mounted() {
    this.pageDictionaryApi(1, 10)
  },

  methods: {
    // 查询
    searchHandler(tyep) {
      if (tyep == 'father') {
        this.isSearch = true
        this.pageNum = 1
        this.pageDictionaryApi(1, this.pageSize, this.name)
      } else {
        this.isSearchChildren = true
        this.childrenPageNum = 1
        this.pageChildDictionaryApi(
          1,
          this.pageSize,
          this.typeValue,
          this.childrenName
        )
      }
    },
    // 重置
    resetHandler(type) {
      if (type == 'father') {
        this.name = ''
        this.pageNum = 1
        this.pageSize = 10
        this.isSearch = false
        this.pageDictionaryApi(1, 10)
      } else {
        this.childrenName = ''
        this.childrenPageNum = 1
        this.childrenPageSize = 10
        this.isSearchChildren = false
        this.pageChildDictionaryApi(1, 10, this.typeValue)
      }
    },
    handleCurrentChange(v) {
      this.pageNum = v
      if (this.isSearch == true) {
        this.pageDictionaryApi(v, this.pageSize, this.name)
      } else {
        this.pageDictionaryApi(v, this.pageSize)
      }
    },
    handleSizeChange(v) {
      this.pageSize = v
      this.pageNum = 1
      if (this.isSearch == true) {
        this.pageDictionaryApi(1, v, this.name)
      } else {
        this.pageDictionaryApi(1, v)
      }
    },
    childrenHandleCurrentChange(v) {
      this.childrenPageNum = v
      if (this.isSearchChildren == true) {
        this.pageChildDictionaryApi(
          v,
          this.childrenPageSize,
          this.typeValue,
          this.childrenName
        )
      } else {
        this.pageChildDictionaryApi(v, this.childrenPageSize, this.typeValue)
      }
    },
    childrenHandleSizeChange(v) {
      this.childrenPageSize = v
      this.childrenPageNum = 1
      if (this.isSearchChildren == true) {
        this.pageChildDictionaryApi(1, v, this.typeValue, this.childrenName)
      } else {
        this.pageChildDictionaryApi(1, v, this.typeValue)
      }
    },
    // 点击字典某一行
    rowClick(row) {
      this.typeId = row.id
      this.typeValue = row.value
      this.pageChildDictionaryApi(1, 10, row.value)
    },
    // 新增
    addHandler(type) {
      if (type == 'father') {
        this.editTitle = '新增字典'
        this.editForm = {
          id: null,
          name: '',
          value: '',
          remark: '',
        }
      } else {
        this.editTitle = '新增子字典'
        this.editForm = {
          id: null,
          name: '',
          value: '',
          typeValue: '',
          remark: '',
        }
      }

      this.editShow = true
    },
    // 编辑
    editHandler(row, type) {
      this.editForm = JSON.parse(JSON.stringify(row))
      if (type == 'father') {
        this.editTitle = '编辑字典'
      } else {
        this.editTitle = '编辑子字典'
      }
      this.editShow = true
    },
    // editForm 保存按钮
    saveHandler(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.editForm))
          switch (this.editTitle) {
            case '新增字典':
              this.saveDictionaryApi(params)
              break
            case '编辑字典':
              this.updateDictionaryApi(params)
              break
            case '新增子字典':
              params.typeId = this.typeId
              params.typeValue = this.typeValue
              this.saveChildDictionaryApi(params)
              break
            case '编辑子字典':
              this.updateChildDictionaryApi(params)
              break
            default:
              break
          }
        } else {
          return false
        }
      })
    },
    // 取消
    cancelHandler(formName) {
      this.$refs[formName].resetFields()
      this.editShow = false
    },
    /**
     * 接口
     */
    // 分页查询字典
    pageDictionaryApi(pageNum = 1, pageSize = 10, searchKey = '') {
      let params = {
        pageNum,
        pageSize,
        searchKey,
      }
      pageDictionary(params).then((res) => {
        if (res.code == 200) {
          this.renderData = res.data.records
          this.total = res.data.total
          if (this.typeValue == null) {
            this.typeId = this.renderData[0].id
            this.typeValue = this.renderData[0].value
            this.pageChildDictionaryApi(1, 10, this.typeValue)
          } else {
            this.pageChildDictionaryApi(1, 10, this.typeValue)
          }
        }
      })
    },
    // 新增字典
    saveDictionaryApi(params) {
      let typeValue = JSON.parse(JSON.stringify(params)).value
      saveDictionary(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('新增字典成功')
          this.typeValue = typeValue
          this.pageNum = 1
          this.pageDictionaryApi(1, this.pageSize, this.name)
          this.editShow = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 编辑字典
    updateDictionaryApi(params) {
      updateDictionary(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('编辑字典成功')
          this.pageDictionaryApi(this.pageNum, this.pageSize, this.name)
          this.editShow = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 删除字典
    deleteDictionaryApi(idList, row) {
      this.$confirm(`此操作将永久删除字典【${row.name}】, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deleteDictionary(idList).then((res) => {
            if (res.code == 200) {
              this.$message.success('删除字典成功')
              this.typeValue = null
              this.pageNum = 1
              this.pageDictionaryApi(1, this.pageSize, this.name)
              this.editShow = false
            } else {
              this.$message.error(res.message)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    // 分页查询子字典
    pageChildDictionaryApi(
      pageNum = 1,
      pageSize = 10,
      typeValue = null,
      searchKey = ''
    ) {
      let params = {
        pageNum,
        pageSize,
        typeValue,
        searchKey,
      }
      pageChildDictionary(params).then((res) => {
        if (res.code == 200) {
          this.childrenData = res.data.records
          this.childrenTotal = res.data.total
        }
      })
    },
    // 新增子字典
    saveChildDictionaryApi(params) {
      saveChildDictionary(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('新增子字典成功')
          this.childrenPageNum = 1
          this.pageChildDictionaryApi(
            1,
            this.childrenPageSize,
            this.typeValue,
            this.childrenName
          )
          this.editShow = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 编辑子字典
    updateChildDictionaryApi(params) {
      updateChildDictionary(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('编辑子字典成功')
          this.pageChildDictionaryApi(
            this.childrenPageNum,
            this.childrenPageSize,
            this.typeValue,
            this.childrenName
          )
          this.editShow = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 删除子字典
    deleteChildDictionaryApi(idList, row) {
      this.$confirm(
        `此操作将永久删除子字典【${row.name}】, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          deleteChildDictionary(idList).then((res) => {
            if (res.code == 200) {
              this.$message.success('删除子字典成功')
              this.childrenPageNum = 1
              this.pageChildDictionaryApi(
                1,
                this.childrenPageSize,
                this.typeValue,
                this.childrenName
              )
              this.editShow = false
            } else {
              this.$message.error(res.message)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
}
</script>

<style lang="less" scoped>
.zBox {
  width: 100%;
  height: 100%;
  .makeHeader {
    margin-bottom: 10px;
  }
}
.makeHeader,
.contentDiv {
  padding: 10px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.1);
}
:deep(.el-form-item__label) {
  display: inline-block;
  width: 100px;
  text-align-last: justify;
}
.left,
.right {
  width: calc(50% - 10px);
  position: relative;
  top: 0;
  left: 0;
  :deep(.el-pagination) {
    width: calc(100% + 20px);
    padding: 10px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.1);
    position: absolute !important;
    bottom: -70px !important;
    right: -10px !important;
    text-align: right;
  }
}
</style>
